<div id="123" v-cloak>
    <el-row :gutter="20" class="no-margin">
        <el-col :span="14">
            <kf-table :url="urls.url" :pks="['userId']" ref="table" highlight-current-row v-on:row-click="userRowClick" height="490" @selection-change="selectionChange" one-screen :title="userFormTitle">

                <el-table-column > <template scope="scope">
                    <el-checkbox v-model="scope.row.checked"></el-checkbox>
                </template></el-table-column>
                <el-table-column prop="userName" label="用户名" min-width="100"></el-table-column>
                <el-table-column prop="userCnName" label="用户中文名" min-width="120"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
                <el-table-column prop="email" label="常用邮箱"  min-width="180"></el-table-column>
                <el-table-column prop="userStatus" label="状态" width="80">
                    <template scope="scope">
                        <el-tag :type="scope.row.userStatus=='1'?'success':'warning'" close-transition>{{scope.row.userStatus=='1'?'正常':'失效'}}</el-tag>
                    </template>
                </el-table-column>
                <div slot="editForm">
                    <el-form :model="formData" :rules="rules" ref="editForm">
                        <el-form-item label="用户名" prop="userName" :label-width="formLabelWidth">
                            <el-input v-model="formData.userName" placeholder="请输入您的用户名" auto-complete="off" :autofocus="true">{{formData}}</el-input>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="newPwd" :label-width="formLabelWidth">
                            <el-input v-model="formData.newPwd" type="password" placeholder="请输入您的登录密码" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        <el-form-item label="用户中文名" prop="userCnName" :label-width="formLabelWidth">
                            <el-input v-model="formData.userCnName" placeholder="请输入您的中文名" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="phone" :label-width="formLabelWidth">
                            <el-input v-model="formData.phone" placeholder="请输入您的联系电话" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱" prop="email" :label-width="formLabelWidth">
                            <el-input v-model="formData.email" placeholder="请输入您的电子邮箱" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        <!--
                        <el-form-item label="头像" prop="faceImg" :label-width="formLabelWidth">
                          <el-input v-model="formData.faceImg" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                          <el-input v-model="formData.remark" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        -->
                        <el-form-item label="用户状态" prop="userStatus" :label-width="formLabelWidth">
                            <el-switch on-text="正常" off-text="失效" v-model="formData.userStatus"></el-switch>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="formBtn">
                    <el-button @click="formCancle()" size="small" :disabled="disabledBtn">取 消</el-button>
                    <el-button type="primary" @click="formConfirm()" size="small" :disabled="disabledBtn">确 定</el-button>
                </div>
                <el-form :inline="true" slot="tools">
                    <el-form-item >
                        <el-input class="el-input--small" v-model="formInput.key" placeholder="请输入关键字">
                            <el-button slot="append" icon="search" @click="onSearchFwUser" title="点击查询"></el-button>
                        </el-input>
                    </el-form-item >
                    <el-form-item >
                        <el-button type="primary" size="small" @click="addFwUser" icon="plus">新增</el-button>
                        <el-button type="primary" size="small" @click="editFwUser" icon="edit" :disabled="disableRowBtn">修改</el-button>
                        <el-button type="primary" size="small" @click="editUserRoles" icon="setting" :disabled="disableRowBtn">角色分配</el-button>
                    </el-form-item>
                </el-form>
            </kf-table>
        </el-col>
        <el-col :span="10">
            <el-collapse class="user-collapse" v-model="activeNames" @click.stop="handleChange">
                <el-collapse-item name="1">
                    <template slot="title">
                        <div @click.stop="handleChange">用户角色</div>
                    </template>
                    <template>
                        <el-table ref="userRoleTable" :data="selectRoleVal"  style="width: 100%;height:440px;">
                            <el-table-column type="index"></el-table-column>
                            <el-table-column property="code" label="角色编码"></el-table-column>
                            <el-table-column property="label" label="角色名称"></el-table-column>
                            <el-table-column property="teamName" label="归属团队">
                                <template scope="scope">
                                    {{ scope.row.teamName || "所有团队" }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-collapse-item>
            </el-collapse>
        </el-col>
    </el-row>
    <el-dialog title="用户角色分配" v-model="dialogTransferRoleVisible" top="5%" class="transfer-dialog" size="small" @close="dialogTransferRoleVisible=false" id="dialogTransfer">
        <div class="text-center">
            <kf-table-transfer v-model="transferSelectRoleVal" :data="transferUserRoleTransfer" :titles="['未选角色','已选角色']" width="100%" :filter-method="filterRoles">
                <template slot="left-columns">
                    <el-table-column label="角色编码" prop="code" header-align="center"></el-table-column>
                    <el-table-column label="角色名称" prop="label" header-align="center"></el-table-column>
                    <el-table-column label="归属团队" prop="teamName" header-align="center">
                        <template scope="scope">
                            {{ scope.row.teamName || "所有团队" }}
                        </template>
                    </el-table-column>
                </template>
                <template slot="right-columns">
                    <el-table-column label="角色编码" prop="code" header-align="center"></el-table-column>
                    <el-table-column label="角色名称" prop="label" header-align="center"></el-table-column>
                    <el-table-column label="归属团队" prop="teamName" header-align="center">
                        <template scope="scope">
                            {{ scope.row.teamName || "所有团队" }}
                        </template>
                    </el-table-column>
                </template>
            </kf-table-transfer>
        </div>
        <span slot="footer">
					<el-button size="small" @click="dialogTransferRoleVisible = false">取 消</el-button>
					<el-button size="small" type="primary" @click="confirmRoles">确定</el-button>
				</span>
    </el-dialog>
    <el-dialog title="选择团队" :visible.sync="dialogVisible2" size="small" :before-close="handleCloseTeam">
        <div class="transfer-wrapper">
            <el-transfer v-model="myTeams" :data="dataTeams"></el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible2 = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="confirmTeams" size="small">确 定</el-button>
		  </span>
    </el-dialog>
</div>
</body>
</html>